<style type="text/css">
  .success{
    border:2px solid green;
    background:lightgreen;
    padding:10px;
  }
  .error{
    border:2px solid red;
    background:pink;
    padding:10px;
  }
</style>
<script src="jquery-1.10.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

  jQuery(document).ready(function(){
    $('#successId').on('click',function(){
      $('#div1').removeClass('error');
      $('#div1').addClass('success');
    });
    $('#errorId').on('click',function(){
      $('#div1').removeClass('success');
      $('#div1').addClass('error');
    });
  });

</script>

<h4 id="successId">Success</h4>
<h4 id="errorId">Error</h4>
<hr>

<div id="div1" >
This is dummy content.This is dummy content.This is <strong>dummy</strong> content.This is dummy <a href="#">content</a>.This is dummy content.This is dummy content.This is dummy content.This is dummy content.<h4>This is dummy content.</h4>This is dummy content.This is dummy content.
</div>
